<html lang="zh-Hans">

<head>
    <title>
        iPhone LiDAR建模对比
    </title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!--Import the Google model-viewer component-->
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
    <!--End of Google model-viewer-->

    <link rel="stylesheet" href="style/style.css">
</head>

<body>
    <div id="headline">
        <h1>
            iPhone 12 Pro Max LiDAR Scanner建模对比
        </h1>
        <h3>Reality Capture: 模型文件大小 GLB: 2MB; USDZ: 2.4MB; 照片数量：75张；拍摄设备：佳能5D Mark3。价格：PPI模式：1.23美金; 用时: 45分钟</h2>
        <h3>3D Scanner App: 模型文件大小 GLB: 10.6MB; USDZ: 3.1MB; 价格：免费; 用时: 大约11分钟</h3>
        <h3>Poly Cam: 模型文件大小 GLB: 3.7MB; USDZ: 16.4MB; 价格：12.99美金; 用时: 大约8分钟</h3>
    </div>
    <div id="model-viewer">
        <div class="model-viewer-container">
            <model-viewer class="model-viewer-stem" id="model-viewer-compare" loading="eager" ar
                src="3DAssets/CaseBoxShoe_RC.glb" ios-src="3DAssets/CaseBoxShoe_RC.usdz" alt="Here is a 3D model"
                exposure="1" environment-image="https://alexli016.github.io/modelviewer/white_bg.jpg" camera-controls
                field-of-view="45deg" interaction-prompt-style="wiggle" quick-look-browsers="safari chrome">

                <button id="ar-button" slot="ar-button">
                    AR功能
                </button>

                <div class="slider">
                    <div class="slides">
                        <button class="slide selected" onclick="switchSrc(this, 'RC')"
                            style="background-image: url('images/RC.png');">
                            <p class="btn-annotation"> Reality Capture </p>
                        </button>

                        <button class="slide" onclick="switchSrc(this, '3DScannerApp')"
                            style="background-image: url('images/3DScannerApp.png');">
                            <p class="btn-annotation"> 3D Scanner App </p>
                        </button>

                        <button class="slide" onclick="switchSrc(this, 'PolyCam')"
                            style="background-image: url('images/PolyCam.png');">
                            <p class="btn-annotation" style="color: white;"> PolyCam </p>
                        </button>

                    </div>
                </div>
            </model-viewer>
        </div>

    </div>

    <figcaption class="figCaption">作者：李子健</figcaption>

    <div>
    </div>
    <!-- =================DELETE THIS PART================= -->

    <script>
        const modelViewerCompare = document.querySelector("#model-viewer-compare");

        window.switchSrc = (element, name) => {
            const base = "3DAssets/CaseBoxShoe_" + name;
            let iosSrc = document.getElementById("model-viewer-compare").getAttribute("ios-src");

            modelViewerCompare.src = base + '.glb';
            modelViewerCompare.iosSrc = base + '.usdz';
            //modelViewerCompare.poster = base + '_poster.png';


            const slides = document.querySelectorAll(".slide");
            slides.forEach((element) => { element.classList.remove("selected"); });
            element.classList.add("selected");
        };
    </script>

</body>

</html>